const path = require('path'); //path是webpack中的基本包，处理路径
const HtMLPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// // 启动脚本时的变量存在于process.env变量中
const isDev = process.env.NODE_ENV === 'development';
const webpack = require('webpack');
//目录拷贝功能，需要一些静态资源
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
const CompressionPlugin = require('compression-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

/*
 * const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
 * 	.BundleAnalyzerPlugin;
 */


const config = {
	mode: isDev ? 'development' : 'production',
	// webpack的编译目标是web平台
	target: 'web',
	performance: {
		hints: false
	},
	//入口文件
	entry: {
		app: ['@babel/polyfill', path.join(__dirname, 'src/index.js')]
	},
	// 输出文件
	output: {
		filename: 'bundle.[name].[hash:8].js', //输出文件名,开发环境不能使用chunkhash，正式环境中需要进行一个修改
		path: path.join(__dirname, 'dist'),
		// publicPath: '/partners/'
	},
	module: {
		rules: [
			{
				test: /\.(vue|js)$/,
				loader: 'eslint-loader',
				exclude: /node_modules/,
				// 预处理
				enforce: 'pre',
				options: {
					fix: true
				}
			},
			{
				// 以vue-load 处理以vue结尾的文件，确保正确输出js代码
				test: /\.vue$/,
				use: [
					{
						loader: 'vue-loader'
					}
				]
			},
			{
				test: /\.css$/,
				// style-loader是将外部css文件注入html文件中，最后将html文件中的css 用css-loader进行解析
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
						options: {
							hmr: isDev
						}
					},
					'css-loader',
					'postcss-loader'
				]
			},
			{
				test: /\.scss$/,
				// exclude: /(node_modules|bower_components)/,   //不打开IE不要用这个，打包会变慢；npm run build的时候打开
				use: ['style-loader', 'css-loader', 'sass-loader']
			},
			{
				test: /\.styl/,
				use: [
					'style-loader',
					'css-loader',
					{
						loader: 'postcss-loader',
						options: {
							sourceMap: true //指定这个值，后面stylus编译的时候就不用重新定值，编译效率变快
						}
					},
					'stylus-loader'
				]
			},
			{
				test: /\.(gif|jpg|jpeg|png|svg)(\?.*)?$/,
				use: [
					{
						loader: 'url-loader',
						/*
						 * 将图片转化成base64的代码，直接写在js内容里而不用生成新的文件，减少http请求
						 * 还可以指定输出的文件名字，
						 */
						options: {
							limit: 10000, // 1k-----限制文件的大小
							name: 'img/[name].[hash:7].[ext]'
						}
					}
				]
			},
			{
				test: /\.(ttf|eot|woff|woff2)$/,
				use: ['url-loader']
			},
			{
				test: /\.js$/,
				// exclude: /(node_modules|bower_components)/,   //不打开IE不要用这个，打包会变慢；npm run build的时候打开
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			}
		]
	},
	resolve: {
		extensions: ['.js', '.vue'],
		alias: {
			vue: 'vue/dist/vue.min.js',
			'@': path.join(__dirname, 'src')
		}
	},
	stats: 'errors-only',
	plugins: [
		new FriendlyErrorsWebpackPlugin(),
		// new BundleAnalyzerPlugin(),
		new CleanWebpackPlugin(),
		//能够在js代码中引用到，并且vue也能够根据此进行分类打包
		new webpack.DefinePlugin({
			'process.env': {
				NODE_ENV: isDev ? '"development"' : '"production"',
				VUE_APP_URL: isDev ? '' :'"/partners"'
			}
		}),
		new HtMLPlugin({
			title: '商务管理信息系统',
			filename: 'index.html',
			template: 'index.html',
		}),
		new VueLoaderPlugin(),
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery'
		}),
		// copy custom static assets
		new CopyWebpackPlugin([
			{
				from: path.resolve(__dirname, 'static'),
				to: 'static',
				ignore: ['.*']
			}
		]),
		new MiniCssExtractPlugin({
			filename: isDev ? '[name].css' : '[name].[hash].css',
			chunkFilename: isDev ? '[id].css' : '[id].[hash].css',
			ignoreOrder: true
		}),
		new CSSSplitWebpackPlugin({ size: 4000 })
	]
};

// // 配置是根据不同的环境判断，通过设置一个环境变量来判断
if (isDev) {
	config.devtool = '#cheap-module-eval-source-map';
	config.devServer = {
		port: 8088,
		//host 可以通过localhost进行访问，同时也可以通过本机的内网id进行访问，就能够在别的网页或者手机上访问
		host: 'localhost',
		//overlay 编译过程有任何错误都直接显示到网页上
		overlay: {
			errors: true
		},
		// 当修改组件代码时，只重新渲染当前组件，不会让整个页面重新加载
		hot: true,

		// 能够在运行后直接打开浏览器
		open: true,
		index: 'index.html',
		proxy: {
			'/api': {
                target: 'https://thxwzl.tellhow.com:4431',
				changeOrigin: true,
				pathRewrite: { // 路径重写，
                    '^/api': '' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
                }
			}
		}
	};
	// 启动webpack.hot功能的插件
	config.plugins.push(
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoEmitOnErrorsPlugin(),
		new CopyWebpackPlugin([
			{
				from: path.resolve(__dirname, 'static'),
				to: 'static'
				// ignore: ['.*']
			}
		])
	);
} else {
	config.entry = {
		app: ['@babel/polyfill', path.join(__dirname, 'src/index.js')],
	};
	//开启gzip
	config.plugins.push(
		new CompressionPlugin({
			test: /\.(js|css)$/,
			filename: '[path].gz[query]',
			deleteOriginalAssets: false
		}),

	);
	config.output.filename = '[name].[chunkhash:8].js';
	config.optimization = {
		splitChunks: {
			cacheGroups: {
				// 这里开始设置缓存的 chunks
				commons: {
					chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
					minSize: 0, // 最小尺寸，默认0,
					minChunks: 2, // 最小 chunk ，默认1
					maxInitialRequests: 5 // 最大初始化请求书，默认1
				},
				vendor: {
					test: /node_modules/, // 正则规则验证，如果符合就提取 chunk
					chunks: 'initial', // 必须三选一： "initial" | "all" | "async"(默认就是异步)
					name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
					priority: 10, // 缓存组优先级
					enforce: true
				}
			}
		},
		runtimeChunk: true
	};
}

module.exports = config;
